<template>
  <div>
    <div class="work-calendar-main">
      <div class="work-calendar-title">
        <div @click="edityear(0)" class="work-calendar-title-btn">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="work-calendar-title-text">{{ year }}</div>
        <div @click="edityear(1)" class="work-calendar-title-btn">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="work-calendar-legend">
          <div class="work-calendar-title2">图例说明:</div>
          <div class="work-calendar-legend-row">
            <div class="work-calendar-legend-box " v-for="item in Defaultoptionslist"  :key="item.dayType" :class="item.color">
              <span class=""></span>
              <p>{{item.dayName}}</p>
            </div>
             <div class="work-calendar-legend-box " v-for="item in customoptionslist"  :key="item.dayType" :class="item.color">
              <span class=""></span>
              <p>{{item.dayName}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="work-calendar-row">
        <div class="work-calendar-btn-row">
          <div class="work-calendar-btn-grop">
            <el-button
             v-for="item in Defaultoptionslist"
             :key="item.dayType"
             
              :class="[SetdaytypeNow == item.dayType ? 'weekdays-btn-on' : '']"
              size="mini"
              @click="SetCalendar(item.dayType)"
              >设置{{item.dayName}}
              
              </el-button
            >
            <!-- <el-button
              class="weekdays-btn"
              :class="SetdaytypeNow == 3 ? 'weekdays-btn-on' : ''"
              size="mini"
              @click="SetCalendar(3)"
              >设置休息日</el-button
            >
            <el-button
              class="weekdays-btn"
              :class="SetdaytypeNow == 4 ? 'weekdays-btn-on' : ''"
              size="mini"
              @click="SetCalendar(4)"
              >设置节假日</el-button
            >
            <el-button
              class="weekdays-btn"
              :class="SetdaytypeNow == 2 ? 'weekdays-btn-on' : ''"
              size="mini"
              @click="SetCalendar(2)"
              >设置半天工作日</el-button
            >
            <el-button
              class="weekdays-btn"
              :class="SetdaytypeNow == 5 ? 'weekdays-btn-on' : ''"
              size="mini"
              @click="SetCalendar(5)"
              >设置节假日调班</el-button
            > -->
            <el-button
             v-for="item in customoptionslist"
             :key="item.dayType"
              class="customopbtn"
              :class="[SetdaytypeNow == item.dayType ? 'weekdays-btn-on' : '']"
              size="mini"
              @click="SetAlternativeCalendar(item.dayType,item.color)"
              >设置{{item.dayName}}
              <i v-show="usermanager==2" title="删除自定义" style="right: 6px" @click.stop="deleteByCustomerSubmit(item.dayType,item.color)" class="el-icon-circle-close"></i>
              <i v-show="usermanager==2" title="编辑自定义" style="right: 30px" @click.stop="modifyByCustomerShow(item)" class="el-icon-edit-outline"></i>
              </el-button
            >
            <el-button
              v-if="customoptionslist.length<3 && usermanager==2"
              class="weekdays-btn"
              size="mini"
              icon="el-icon-circle-plus-outline"
              @click="addcustomshow"
              >新增自定义</el-button
            >
            <!-- <el-button
            class="weekdays-btn"
            size="mini"
            @click="removeWeekendCurrentYear"
            >设置所有周末为节假日</el-button
          > -->
          </div>
          <div class="work-calendar-preserve">
            <el-button @click="ClearAllSet">清空</el-button>
            <el-button @click="ResetAllSet" type="primary">重置</el-button>
          </div>
          <div class="work-calendar-preserve">
            <el-button @click="getHoliDayByYearData" type="primary"
              >获取法定节假日</el-button
            >
          </div>
          <div class="work-calendar-preserve">
            <el-button @click="submitWorckCalendar" type="primary"
              >保存设置</el-button
            >
          </div>
          <div class="work-calendar-weekday">
            <div class="work-calendar-title2">半天工作日/休息日规则</div>
            <div class="weekday-type-row" @change="weekdayChange">
              <el-radio v-model="weekdayval" label="HoliDay">休息日</el-radio>
              <el-radio v-model="weekdayval" label="HalfadayworkDay"
                >半天工作日</el-radio
              >
            </div>
            <el-checkbox-group v-model="weekday">
              <el-checkbox :label="1">周一</el-checkbox>
              <el-checkbox :label="2">周二</el-checkbox>
              <el-checkbox :label="3">周三</el-checkbox>
              <el-checkbox :label="4">周四</el-checkbox>
              <el-checkbox :label="5">周五</el-checkbox>
              <el-checkbox :label="6">周六</el-checkbox>
              <el-checkbox :label="0">周日</el-checkbox>
            </el-checkbox-group>
            <el-button size="mini" @click="addWeekendCurrentYear"
              >批量设置</el-button
            >
          </div>

          <div class="work-calendar-text">
            <div class="work-calendar-title2">说明</div>
            <div class="work-calendar-text-box">不设置默认类型为工作日</div>
          </div>
        </div>
        <div class="work-calendar-box">
          <YearCalendar
            v-model="year"
            :activeDates.sync="activeDates"
            @toggleDate="toggleDate"
            lang="tw"
            :showYearSelector="false"
            prefixClass="your_customized_wrapper_class"
            :activeClass="activeClass"
          ></YearCalendar>
        </div>
      </div>
    </div>
    <el-dialog
				class="add-user-dia"
			:title="isAddNew ? '新增自定义' : '编辑自定义'"
				:visible.sync="Alternativearrayshow"
				width="500px"
		
				:close-on-click-modal="false"
			>
				<el-form
					:rules="Alternativearrayrules"				
					status-icon
					ref="AlternativearrayForm"
					:model="Alternativearray"
					label-position="right"
					label-width="100px"
				>
					<el-form-item label="类型名称" prop="dayName">
						<el-input v-model="Alternativearray.dayName" placeholder="请输入类型名称"></el-input>
					</el-form-item>
          <el-form-item label="类型样式" prop="color" v-if="isAddNew">
             <el-select v-model="Alternativearray.color" placeholder="请选择类型样式">
              <el-option
                v-for="item in acustomclass"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
         
					</el-form-item>
           <el-form-item label="类型备注" prop="note">
						<el-input v-model="Alternativearray.note" placeholder="请输入类型备注"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
          <el-button
            v-if="!isAddNew"
						type="primary"
            @click="modifyByCustomerSubmit('AlternativearrayForm')"
						>确 定</el-button
					>
					<el-button
            v-if="isAddNew"
						type="primary"
            @click="addByCustomerSubmit('AlternativearrayForm')"
						>确 定</el-button
					>
					<el-button @click="Alternativearrayshow = false">取 消</el-button>
				</div>
			</el-dialog>
  </div>
</template>

<script>
import ajax from "@/utils/ajax";
import YearCalendar from "vue-material-year-calendar";
import dayjs from "dayjs";
let classtonum=[]
export default {
  components: { YearCalendar },
  data() {
    return {
      year: new Date().getFullYear(),
      yeararr: [],
      activeDates: [],
      oldactiveDates: [],
      formactiveDates: {
        update: [],
        delete: [],
      },
      activeClass: "HalfadayworkDay",
      SetdaytypeNow: 2,
      weekday: [],
      weekdayval: "HalfadayworkDay",
      leavepageboolf: true,
      Alternativearray:{
        color:'',
        dayName:'',
        note:''
      },
      customclass:[
        {
          value: 'Alternative1',
          label: '自定义样式1'
        }, {
          value: 'Alternative2',
          label: '自定义样式2'
        }, {
          value: 'Alternative3',
          label: '自定义样式3'
        }
      ],
      acustomclass:[],
      customarray:[],
      Alternativearrayshow:false,
      Alternativearrayrules: {
        dayName: [
            { required: true, message: '请输入类型名称', trigger: 'blur' },
          ],
          color: [
            { required: true, message: '请选择类型样式', trigger: 'change' }
          ],
          note: [
            { required: true, message: '请输入类型备注', trigger: 'change' }
          ],
        },
      Defaultoptionslist:[],
      customoptionslist:[],
      isAddNew:true,
      usermanager: this.$store.getters.user.manager
    };
  },
  mounted() {
    this.acustomclass.push(...this.customclass)
    this.getCustomerAvailableData()
    this.getactiveDatesData();
  },
  beforeRouteLeave(to, from, next) {
    this.$confirm("即将离开当前页面, 是否离开?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
       next(true);
      })
      .catch(() => {
        this.leavepageboolf = true;
        next(false);
      });

    // //next方法传true或者不传为默认历史返回，传false为不执行历史回退
    // if (this.backStatu) {
    //   next(true);
    // } else {
    //   next(false);
    // }
    // this.tipshow = true;
  },
  methods: {
    getCustomerAvailableData(){
       ajax.get({
          url: this.$API.getCustomerAvailableList,
          success: (response) => {
         
              if (response.success) {
                this.Defaultoptionslist=response.data.filter(itme => itme.customerId ==0 && itme.dayType!=1)
                this.customoptionslist=response.data.filter(itme => itme.customerId ==1)
                classtonum=this.customoptionslist
                for(let item of this.customoptionslist)
                {
                 if(this.acustomclass.findIndex((data)=>data.value==item.color) !=-1){
                  this.acustomclass.splice(this.acustomclass.findIndex((data)=>data.value==item.color),1)
                 }
                }
              
              }
          },
          error: (res) => {
            this.$message({
              message: res.message,
              type: "error",
            });
          },
        });
    },
    getactiveDatesData() {
      if (this.yeararr.findIndex((data) => data == this.year) == -1) {
        ajax.get({
          url: this.$API.getcalendar+this.year,
          success: (response) => {
            // console.log(response)
            if (response.success) {
              this.yeararr.push(this.year);
              let handledata = [];
            
              for (let item of response.data) {
                let dayarr = {};
                dayarr.id = item.id;
                dayarr.date = item.date;
                dayarr.className = dayTypetoClass(item.dayType);
                handledata.push(dayarr);
              }
              this.activeDates.push(...handledata);
              console.log(this.activeDates)
              this.oldactiveDates.push(...handledata);

             
            }
          },
          error: (res) => {
            this.$message({
              message: res.message,
              type: "error",
            });
          },
        });
      }
    },
    toggleDate(dateInfo) {
      // console.log(dateInfo); // { date: '2010-10-23', selected: true }
    },
    addWeekendCurrentYear() {
      // this.removeWeekendCurrentYear();
      let theDate = dayjs(`${this.year}-01-01`);
      let isActiveDateUsingString =
        this.activeDates.length && typeof this.activeDates[0] === "string";
      while (theDate.diff(theDate.endOf("year"), "day") !== 0) {
        if (getHoliDayWeek(theDate.day(), this.weekday)) {
          let oDate = isActiveDateUsingString
            ? theDate.format("YYYY-MM-DD")
            : { date: theDate.format("YYYY-MM-DD") };
          oDate.className = this.weekdayval;
          this.activeDates.push(oDate);
        }
        // else {
        //   let oDate = isActiveDateUsingString
        //     ? theDate.format("YYYY-MM-DD")
        //     : { date: theDate.format("YYYY-MM-DD") };
        //   oDate.className = "";
        //   if (
        //     this.activeDates.findIndex((data) => data.date == oDate.date) != -1
        //   ) {
        //     this.activeDates.splice(
        //       this.activeDates.findIndex((data) => data.date == oDate.date),
        //       1
        //     );
        //   }
        // }
        theDate = theDate.add(1, "day");
      }
    },
    //
    getHoliDayByYearData(){
       ajax.post({
          url: this.$API.getHoliDayByYear,
          data: {
            year: this.year,
          },
          success: (response) => {
            let responsedata=response.data.holiday
            for(let item in responsedata){
              let oDate={}
              
              oDate.date=responsedata[item].date
              oDate.className=responsedata[item].holiday?"HolidayandvacationsDay":"Exchangeadayoff"
              let activeDates_index=this.activeDates.findIndex(data=>data.date == oDate.date)
              if(activeDates_index !=-1){
                this.activeDates[activeDates_index].className=responsedata[item].holiday?"HolidayandvacationsDay":"Exchangeadayoff"
              }
              else{
                this.activeDates.push(oDate);
              }
              
            }
            console.log(this.activeDates)
             
          },
          error: (res) => {
            this.$message({
              message: res.message,
              type: "error",
            });
          },
        });
    },
    removeWeekendCurrentYear() {
      this.activeDates = this.activeDates.filter((oDate) => {
        let date = typeof oDate === "string" ? oDate : oDate.date;
        let day = dayjs(date).day();
        let isCurrentYear = dayjs(date).year() === this.year;
        let isWeekend = [3, 0].includes(day);
        return !(isCurrentYear && isWeekend);
      });
    },
    ClearAllSet() {
      this.activeDates = this.activeDates.filter((oDate) => {
        let date = typeof oDate === "string" ? oDate : oDate.date;
        let day = dayjs(date).day();
        let isCurrentYear = dayjs(date).year() === this.year;
        let isWeekend = [0, 1, 2, 3, 4, 5, 6].includes(day);
        return !(isCurrentYear && isWeekend);
      });
    },
    ResetAllSet() {
      this.yeararr = [];
      this.activeDates = [];
      this.oldactiveDates = [];
      this.formactiveDates.update = [];
      this.formactiveDates.delete = [];
      this.getactiveDatesData();
    },
    weekdayChange() {
      this.weekday = [];
    },
    SetCalendar(type) {
      switch (type) {
        case 2:
          this.activeClass = "HalfadayworkDay";
          this.SetdaytypeNow = 2;
          break;
        case 3:
          this.activeClass = "HoliDay";
          this.SetdaytypeNow = 3;
          break;
        case 4:
          this.activeClass = "HolidayandvacationsDay";
          this.SetdaytypeNow = 4;
          break;
        case 5:
          this.activeClass = "Exchangeadayoff";
          this.SetdaytypeNow = 5;
          break;
        default:
          break;
      }
    },
    SetAlternativeCalendar(type,color) {
      this.SetdaytypeNow = type;
      this.activeClass = color
    },
    edityear(type) {
      if (type == 0) {
        this.year -= 1;
        this.getactiveDatesData();
      } else {
        this.year += 1;
        this.getactiveDatesData();
      }
    },
    submitWorckCalendar() {
      //判断获取删除的日期
      for (let item of this.oldactiveDates) {
        if (
          this.activeDates.findIndex((data) => data.date == item.date) == -1
        ) {
          let deldayarr = {};
          deldayarr.id = item.id;
          this.formactiveDates.delete.push(deldayarr);
        }
      }
     
      for (let item of this.activeDates) {
        let dayarr = {};
        let attdayid = this.oldactiveDates.find(
          (data) => data.date == item.date
        );
        if (attdayid) {
          dayarr.id = attdayid.id;
        }
        dayarr.date = item.date;
        
        dayarr.dayType = ClasstodayType(item.className);
        this.formactiveDates.update.push(dayarr);
      }

      // console.log(this.formactiveDates);

      // console.log(JSON.stringify(this.formactiveDates.update));
      // console.log(JSON.stringify(this.formactiveDates.delete));

      ajax.post({
        url: this.$API.modifycalendar,
        data: {
          dateUpdate: JSON.stringify(this.formactiveDates.update),
          dateDelete: JSON.stringify(this.formactiveDates.delete),
        },
        success: (response) => {
          // console.log(response)
          if (response.success) {
            this.yeararr = [];
            this.activeDates = [];
            this.oldactiveDates = [];
            this.formactiveDates.update = [];
            this.formactiveDates.delete = [];
            this.getactiveDatesData();
            this.$message({
              type: "success",
              message: response.message,
            });
            this.leavepageboolf = true;
           
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
      // console.log(getHoliDayWeek(1, this.weekday));
    },
    //新增自定义日期类型弹窗
    addcustomshow(){
      this.isAddNew=true
      this.Alternativearrayshow=true
      this.$nextTick(()=>{
      this.resetForm('AlternativearrayForm')
      })
    },
    modifyByCustomerShow(row){
      this.isAddNew=false
      this.Alternativearrayshow=true
      this.$nextTick(()=>{
      this.resetForm('AlternativearrayForm')
        this.Alternativearray.color=row.color
        this.Alternativearray.dayName=row.dayName
        this.Alternativearray.note=row.note
        this.Alternativearray.dayType=row.dayType
      })
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    //新增自定义
    addByCustomerSubmit(formName) {
      this.Alternativearray.customerId =this.$store.getters.customerId;
			this.$refs[formName].validate((valid) => {
				if (valid) {
					ajax.post({
						url: this.$API.addByCustomer,
						data: this.Alternativearray,
						success: (response) => {
							//console.log(response)
							if (response.success) {
								this.getCustomerAvailableData()
								this.Alternativearrayshow = false
								this.$message({
									message: '新增自定义成功',
									type: 'success',
								})
							} else {
								this.$message({
									message: response.message,
									type: 'warning',
								})
							}
						},
						error: (response) => {
							this.$message({
								message: response.message,
								type: 'error',
							})
						},
					})
				} else {
					//console.log('验证失败')
				}
      })
    },
    //编辑
    modifyByCustomerSubmit(formName) {
      this.Alternativearray.customerId =this.$store.getters.customerId;
			this.$refs[formName].validate((valid) => {
				if (valid) {
					ajax.post({
						url: this.$API.modifyByCustomer,
						data: this.Alternativearray,
						success: (response) => {
							//console.log(response)
							if (response.success) {
								this.getCustomerAvailableData()
								this.Alternativearrayshow = false
								this.$message({
									message: '修改自定义成功',
									type: 'success',
								})
							} else {
								this.$message({
									message: response.message,
									type: 'warning',
								})
							}
						},
						error: (response) => {
							this.$message({
								message: response.message,
								type: 'error',
							})
						},
					})
				} else {
					//console.log('验证失败')
				}
      })
    },
    //删除
    deleteByCustomerSubmit(dayType,color){
      
      if(this.activeDates.findIndex((data)=>data.className==color)!=-1){
        this.$message({
					message: '请删除日历上的日期再删除自定义类型',
					type: 'warning',
				})
      }else{
        ajax.post({
						url: this.$API.deleteByCustomer + dayType,
						
						success: (response) => {
							//console.log(response)
							if (response.success) {
           
                this.acustomclass.push(this.customclass.find((data)=>data.value==color))
                this.submitWorckCalendar()
                this.getCustomerAvailableData()
							} else {
								this.$message({
									message: response.message,
									type: 'warning',
								})
							}
						},
						error: (response) => {
							this.$message({
								message: response.message,
								type: 'error',
							})
						},
					})
      }
    }
  },
};
function ClasstodayType(type) {
  switch (type) {
    case "HalfadayworkDay":
      return 2;
    case "HoliDay":
      return 3;
    case "HolidayandvacationsDay":
      return 4;
    case "Exchangeadayoff":
      return 5;
    default:
      return classtonum.find(data=>data.color==type).dayType
  }
}
function dayTypetoClass(type) {
  switch (type) {
    case "2":
      return "HalfadayworkDay";
    case "3":
      return "HoliDay";
    case "4":
      return "HolidayandvacationsDay";
    case "5":
      return "Exchangeadayoff";
    case "1":
      return "";
    default:
      return classtonum.find(data=>data.dayType==type).color
  }
}
function getHoliDayWeek(day, HoliDayWeek) {
  if (HoliDayWeek.indexOf(day) == -1) {
    return false;
  } else {
    return true;
  }
}
</script>

<style lang="stylus">
.your_customized_wrapper_class {
  background-color: #0aa;
  color: white;

  &.red {
    background-color: red;
    color: white;

    &:after {
      background-size: 100% 100%;
    }
  }

  &.blue {
    background-color: #0000aa;
    color: white;
  }

  &.HalfadayworkDay {
    background-color: #000;
    color: white;
  }

  &.HoliDay {
    background-color: #ffd9d9;
    color: #F73131;
    position: relative;
  }

  &.HoliDay:before {
    content: '休';
    display: block;
    position: absolute;
    top: -8px;
    right: -7px;
    height: 1px;
    font-size: 12px;
  }

  &.HolidayandvacationsDay {
    background-color: #ff5d5d;
    color: #fff;
    position: relative;
  }

  &.HolidayandvacationsDay:before {
    content: '假';
    display: block;
    position: absolute;
    color: #ff0332;
    top: -8px;
    right: -7px;
    height: 1px;
    font-size: 12px;
  }

  &.HalfadayworkDay {
    background-color: #e6e6e6;
    color: #505050;
    position: relative;
  }

  &.HalfadayworkDay:before {
    content: '半';
    display: block;
    position: absolute;
    top: -8px;
    right: -7px;
    height: 1px;
    font-size: 12px;
  }

  &.Exchangeadayoff {
    background-color: #8e8e8e;
    color: #fff;
    position: relative;
  }

  &.Exchangeadayoff:before {
    content: '补';
    display: block;
    color: #333;
    position: absolute;
    top: -8px;
    right: -7px;
    height: 1px;
    font-size: 12px;
  }
  &.Alternative1{
    background-color:#ad2e9d;
    color: #fff;
  }
  &.Alternative2{
    background-color:#1b5dd5;
    color: #fff;
  }
  &.Alternative3{
    background-color:#01a10d;
    color: #fff;
  }
  &.your_customized_classname {
    background-color: yellow;
    color: black;
  }
}

.work-calendar-main {
  border: solid 0.01rem #3696c2;
  -webkit-box-shadow: 0 0 20px 0px inset rgba(30, 144, 255, 60%);
  box-shadow: 0 0 20px 0px inset rgba(30, 144, 255, 60%);
  background-color: #1c2961;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0.1rem;
}

.work-calendar-row {
  display: flex;
}

.work-calendar-row .vue-calendar__container {
  background: initial;
}

.work-calendar-row .vue-calendar__container {
  box-shadow: initial;
}

.work-calendar-row .calendar:hover {
  transform: scale(1);
}

.work-calendar-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.2rem;
}

.work-calendar-btn-row {
  border-right: 1px solid rgba(30, 144, 255, 60%);
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
  min-width: 2rem;
}

.work-calendar-btn-grop {
  display: flex;
  flex-direction: column;
}

.work-calendar-btn-grop .el-button {
  line-height: 1.5;
  position: relative;
}
.work-calendar-btn-grop .el-button.customopbtn i{
    font-size: 0.16rem;
    font-weight: bold;
    position: absolute;
}
.work-calendar-btn-grop .el-button+.el-button {
  margin-left: 0px;
  margin-top: 10px;
}

.work-calendar-title-text {
  font-size: 0.24rem;
  padding: 0 0.5rem;
}

.work-calendar-title-btn {
  cursor: pointer;
}

.work-calendar-title-btn i {
  font-size: 0.24rem;
}

.weekdays-btn-on, .weekdays-btn-on:focus, .weekdays-btn-on:hover {
  background: #218eff;
  border-color: #218eff;
  color: #fff;
}

.work-calendar-row .vue-calendar__container .container__month {
  flex: 20%;
}

.work-calendar-row .calendar {
  min-height: 287px;
}

.work-calendar-weekday, .work-calendar-text {
  padding-top: 15px;
  margin-top: 15px;
  position: relative;
}

.work-calendar-title2 {
  text-align: center;
  font-size: 0.15rem;
  padding-bottom: 15px;
}

.work-calendar-weekday .el-checkbox {
  color: #fff;
}

.work-calendar-weekday:before, .work-calendar-text:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0%, rgb(27, 158, 234) 50%, rgba(255, 255, 255, 0.11) 100%), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

.work-calendar-preserve {
  margin-top: 15px;
  display: flex;
}

.work-calendar-preserve .el-button {
  flex: 1;
  padding: 12px 0;
}

.work-calendar-weekday .el-checkbox {
  margin-right: 14px;
}

.work-calendar-weekday .el-button {
  margin-top: 15px;
  width: 100%;
}

.work-calendar-legend-box {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.work-calendar-legend-box span {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: block;
  margin-right: 10px;
}

.HoliDay span {
  background: #ffd9d9;
}

.HalfadayworkDay span {
  background: #e6e6e6;
}

.HolidayandvacationsDay span {
  background: #ff5d5d;
}

.Exchangeadayoff span {
  background: #8e8e8e;
}
.Alternative1 span{
    background-color:#ad2e9d
  }
  .Alternative2 span{
    background-color:#1b5dd5
  }
  .Alternative3 span{
    background-color:#01a10d
  }
.work-calendar-text-box {
  font-size: 14px;
}

.weekday-type-row {
  margin-bottom: 10px;
}

.weekday-type-row .el-radio {
  color: #fff;
}

.work-calendar-legend {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0.25rem;
}

.work-calendar-legend .work-calendar-legend-row {
  display: flex;
  align-items: center;
}

.work-calendar-legend .work-calendar-title2 {
  padding-bottom: 0;
  padding-right: 10px;
}

.calendar .day:not(.calendar__day--otherMonth):hover {
  background-color: rgb(224 224 224);
  border-radius: 5px;
  color: #333;
}
</style>